<template>
	<view>
		<u-navbar :border-bottom="false" title-color="#333" title-bold title="上传成单喜报" title-size="36"></u-navbar>
		<view class="tishi-top">
			请填写真实信息，平台审核通过率更高哦 !
		</view>
		<view class="d-id u-p-t-24">
			<view class="font_weight u-p-b-16 font_16_333">
				个人信息 <span class="font_12_999 font_weight_normal">（不可编辑）</span>  
			</view>
			
			<view class="d-item flex border_bottom_F6F6F6">
				<view class="d-item-t u-m-r-14">身份认证</view>
				<view class="font_14_000">{{lsdetail.type==1?'律师':'法学生'}}</view>
			</view>
			<view class="d-item flex border_bottom_F6F6F6">
				<view class="d-item-t u-m-r-14">姓名</view>
				<view class="font_14_000">{{lsdetail.name}}</view>
			</view>
			<view class="d-item flex border_bottom_F6F6F6">
				<view class="d-item-t u-m-r-14">所在地区</view>
				<view class="font_14_000">{{lsdetail.area_id}}</view>
			</view>
			<view class="d-item flex border_bottom_F6F6F6">
				<view class="d-item-t u-m-r-14">就职单位</view>
				<view class="font_14_000">{{lsdetail.work_company}}</view>
			</view>
			<view class="d-item flex">
				<view class="d-item-t u-m-r-14">擅长领域</view>
				<view class="font_14_000" v-if="lsdetail.tags">{{lsdetail.tags.toString()}}</view>
			</view>
		</view>
		<view class="d-id u-p-t-24">
			<view class="font_weight u-p-b-16">
				成案合同 <span class="xing">*</span>  
			</view>
			<view class="u-m-t-10">
				<u-upload width="186" height="186" max-count="6" :form-data="formData" :max-size="1 * 1024 * 1024" :deletable="false"
					:action="action" :file-list="fileList" @on-success="onSuccess"></u-upload>
			</view>
			<view class="font_14_999 d-item u-m-t-16 u-m-l-10">
				请上传合同首页、带有成案金额、按手印或者盖章的图片哦!
			</view>
		</view>
		<view class="d-id u-p-t-24">
			<view class="font_weight u-p-b-16 font_16_333">
				案件信息 <span class="xing">*</span>  
			</view>
			
			<view class="d-item flex border_bottom_F6F6F6 flex_sb">
				<view class="d-item-t u-m-r-14">成案信息渠道</view>
				<view class="flex" @click="showqudao=true">
					<view class="font_14_999">
						{{qudao?qudao:'请选择'}}
					</view>
					<u-icon name="arrow-right" color="#333" size="28"></u-icon>
				</view>
			</view>
			<view class="d-item flex border_bottom_F6F6F6 flex_sb">
				<view class="d-item-t u-m-r-14">案件类型</view>
				<view class="flex" @click="typeShow=true"> 
					<view class="font_14_999">
						{{type?type:'请选择'}}
					</view>
					<u-icon name="arrow-right" color="#333" size="28"></u-icon>
				</view>
			</view>
			<view class="d-item flex border_bottom_F6F6F6 flex_sb">
				<view class="d-item-t u-m-r-14">成案地点</view>
				<view class="flex" @click="showsrAddress=true">
					<view class="font_14_999">
						{{address?address:'请选择'}}
					</view>
					<u-icon name="arrow-right" color="#333" size="28"></u-icon>
				</view>
			</view>
			<view class="d-item flex border_bottom_F6F6F6 flex_sb">
				<view class="d-item-t u-m-r-14">成案周期</view>
				<view class="flex">
					<u-input input-align="right" v-model="dur" />
					<view class="u-m-l-8">天</view>
				</view>
			</view>
			<view class="d-item flex border_bottom_F6F6F6 flex_sb">
				<view class="d-item-t u-m-r-14">涉案金额</view>
				<view class="flex">
					<u-input input-align="right" v-model="price_dur" />
					<view class="u-m-l-8">元</view>
				</view>
			</view>
			<view class="d-item flex border_bottom_F6F6F6 flex_sb">
				<view class="d-item-t u-m-r-14">当事人手机号</view>
				<view class="flex">
					<u-input input-align="right" v-model="phone" />
				</view>
			</view>
			<view class="d-item flex border_bottom_F6F6F6 flex_sb">
				<view class="d-item-t u-m-r-14">成案委托金额</view>
				<view class="flex">
					<u-input input-align="right" v-model="price" />
					<view class="u-m-l-8">元</view>
				</view>
			</view>
		</view>
		<view class="d-id u-padding-24">
			<view class="font_weight u-p-b-16">
				案件介绍 <span class="xing">*</span>  
			</view>
			<view class="textarea-d">
				<u-input maxlength="100" v-model="content" type="textarea" height="280" placeholder="请输入案件内容。" />
			</view>
		</view>
		<view class="d-id u-padding-0">
			<u-swiper height="114" :list="swlist"></u-swiper>
		</view>
		
		
		<u-popup v-model="wcshow" mode="center" border-radius="32">
			<view class="popupmd text_center">
				<image class="sq-s3" src="../../../static/img/lawyerVersion/sq-s1.png" mode=""></image>
				<view class="">
					<view class="u-font-40 font_weight">
						上传成功等待审核
					</view>
					<view class="font_14_999 u-m-t-28">
						预计需要1～3个工作日，请耐心等待
					</view>
				</view>
				<view class="p-bd u-m-t-50 flex flex_cen">
					<view class="p-btn2" @click="back">
						继续浏览
					</view>
				</view>
			</view>
		</u-popup>
		
		<!-- <u-picker :params="params" mode="region" confirm-color="#651321" v-model="showsrAddress" @confirm="regionconfirm1"></u-picker> -->
		<u-select v-model="showsr1" mode="single-column" :list="addressList" @confirm="regionconfirm1" value-name="id" label-name="name"></u-select>
		<u-picker mode="selector" confirm-color="#20C064" :range="selector" v-model="typeShow" @confirm="showconfirm" range-key="name"></u-picker>
		<u-picker mode="selector" confirm-color="#20C064" :range="selector2" v-model="showqudao" @confirm="showconfirm2" range-key="name"></u-picker>
		<view class="" style="width: 100%;height: 170rpx;"></view>
		<view class="btn-bo">
			<button class="btn_login_btn" @click="submit">
				上传成单喜报
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressList:[],
				 params: {
					province: true,
					city: true,
					area: true
				},
				wcshow:false,
				name:'',
				
				qudao:'',
				type:'',
				address:'',
				showqudao:false,
				showsrAddress:false,
				typeShow:false,
				list: [],
				type_id:'',
				
				// 演示地址，请勿直接使用
				action: '',
				fileList: [],
				images:[],
				formData: {
					token: uni.getStorageSync("token")
				},
				selector: [],
				selector2: [],
				swlist: [],
				
				lsdetail:[],
				
				
				contract_img:[],
				task_id:'',
				province:'',
				dur:'',
				price_dur:'',
				phone:'',
				price:'',
				content:'',
				from:''
			}
		},
		onLoad() {
			this.action = this.$config.uploadUrl
			console.log(this.action)
			this.getInfo()
			this.lingyuList()
			this.qudaoList()
			this.lunbo()
			this.getaddrerss()
		},
		methods: {
			getaddrerss(){
				this.$api({
					url: '/getChinaArea',
					method: 'get',
				}).then(res => {
					if (res.code == 1) {
						this.addressList = res.data
					}
				})
			},
			lunbo(){
				this.$api({
					url: '/getBanner',
					method: 'get',
					data: {
						position: 8,
					},
				}).then(res => {
					if (res.code == 1) {
						this.swlist = res.data
					}
				})
			},
			//个人信息
			getInfo() {
				this.$api({
					url: '/lawyer/getLawyer',
					method: 'get',
					data: {
						token:uni.getStorageSync("token")
					},
				}).then(res => {
					if (res.code == 1) {
						this.lsdetail = res.data
					} 
				})
				
			},
			lingyuList(){
				this.$api({
					url: '/lawyer/getTags',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						type:1 //类型：1=擅长领域，2=服务类型
					},
				}).then(res => {
					if (res.code == 1) {
						this.selector = res.data
					}
				})
			},
			qudaoList(){
				this.$api({
					url: '/lawyer/getTags',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						type:3 //类型：1=擅长领域，2=服务类型
					},
				}).then(res => {
					if (res.code == 1) {
						this.selector2 = res.data
					}
				})
			},
			showconfirm(e) {
				this.type = this.selector[e].name
				this.task_id = this.selector[e].id
				console.log(e)
			},
			showconfirm2(e) {
				this.qudao = this.selector2[e].name
				this.from = this.selector2[e].id
				console.log(e)
			},
			regionconfirm1(e) {
				// this.address = e.province.label + e.city.label + e.area.label
				// this.province = e.area.value
				this.address = e[0].label
				this.province = e[0].value
				console.log(e)
			},
			back(){
				uni.navigateBack()
			},
			onSuccess(data, index, lists, name) {
				console.log(data)
				this.contract_img.push(data.data.path)
			},
			submit(){
				
				if (this.contract_img.length==0) {
					uni.showToast({
						title: "请上传合同",
						icon: "none"
					});
					return
				}
				
				if (!this.task_id || !this.province || !this.dur || !this.price_dur || !this.phone || !this.price || !this.from) {
					uni.showToast({
						title: "案件信息请填写完整",
						icon: "none"
					});
					return
				}
				if (!this.content) {
					uni.showToast({
						title: "请输入案件介绍",
						icon: "none"
					});
					return
				}
				this.$api({
					url: '/lawyer/up_success_order',
					method: 'post',
					data: {
						token: uni.getStorageSync("token"),
						contract_img:this.contract_img.toString(),
						task_id:this.task_id,
						province:this.province,
						dur:this.dur,
						price_dur:this.price_dur,
						phone:this.phone,
						price:this.price,
						content:this.content,
						from:this.from
					},
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: "上传成功",
							icon: "none"
						});
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					}
				})
			},
			getType() {
				this.$api({
					url: '/getGuestBookType',
					method: 'get',
					data: {
						token: uni.getStorageSync("token"),
						// "type": '0'   // 0用户咨询，1意见反馈
					},
				}).then(res => {
					if (res.code == 200) {
						this.list = []
						let lists = Object.values(res.data)
						let keys = Object.keys(res.data)

						for (let i in lists) {
							this.list.push({
								name: lists[i],
								checked: false,
								id: keys[i]
							})
						}


					}
				})
			},

			// 选中任一checkbox时，由checkbox-group触发
			checkboxGroupChange(e) {
				this.type_id = e.toString()
				console.log(e);
			},
		}
	}
</script>

<style scoped lang="scss">
	/deep/ .u-indicator-item-round-active {
		width: 14rpx;
		background-color: #F7D37D;
	}
	.tishi-top{
		width: 686rpx;
		height: 72rpx;
		background: #FFFBF4;
		border-radius: 8rpx 8rpx 8rpx 8rpx;
		border: 2rpx solid #FFE3BC;
		font-size: 28rpx;
		color: #FC9E30;
		line-height: 72rpx;
		padding-left: 24rpx;
		margin: 20rpx auto;
	}
	.xing{
		color: #F40000;
	}
	.popupmd{
		width: 554rpx;
		// height: 566rpx;
		background: #FFFFFF;
		border-radius: 32rpx 32rpx 32rpx 32rpx;
		padding: 24rpx 24rpx 68rpx 24rpx;
		
		.sq-s3{
			width: 260rpx;
			height: 260rpx;
			margin: 0 auto;
		}
		.p-bd{
			font-size: 28rpx;
			line-height: 64rpx;
			text-align: center;
			
			.p-btn2{
				width: 508rpx;
				height: 64rpx;
				background: linear-gradient( 180deg, #FA2D2D 0%, #F40000 100%);
				border-radius: 46rpx 46rpx 46rpx 46rpx;
				color: #FFFFFF;
			}
		}
		
		
	}
	.btn-bo{
		width: 750rpx;
		height: 120rpx;
		background: #FFFFFF;
		box-shadow: 0rpx -2rpx 8rpx 2rpx rgba(0,0,0,0.14);
		padding-top: 14rpx;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 9;
		
		.btn_login_btn{
			width: 686rpx;
			height: 90rpx;
			background: linear-gradient( 177deg, #FFF7EA 0%, #ECA561 100%);
			border-radius: 48rpx 48rpx 48rpx 48rpx;
			// margin-top: 116rpx;
			font-size: 36rpx;
			color: #773E00;
			line-height: 90rpx;
			margin-left: 32rpx;
			text-align: center;
			font-weight: bold;
		}
	}
	.d-id {
		width: 702rpx;
		padding:0 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		margin: 24rpx auto;
		
		.d-item{
			height: 100rpx;
			.d-item-t{
				width: 180rpx;
			}
		}
	}

	.textarea-d {
		width: 640rpx;
		height: 280rpx;
		background: #F8F8F8;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		padding: 24rpx;
	}

</style>